<template>
  <view class="page-container">
    <scroll-view class="image-container" scroll-y="true" @scroll="scroll">
		<!-- 第一张图片 -->
		<image :src="imageUrls[0]" class="image" mode="widthFix" />
		<view class="video-container">
			<channel-video
				class="video"
				finder-user-name="sphWRFpSsAdN8R9"
				feed-id="export/UzFfAgtgekIEAQAAAAAAPYUJ1xdDhAAAAAstQy6ubaLX4KHWvLEZgBPEmqN0RxcNdpaPzNPgMJoYmrua16eQaXpAJ5FsE38E"
				autoplay=true
				loop=true
			></channel-video>
		</view>

		<!-- 第二张图片 -->
		<image :src="imageUrls[1]" class="image" mode="widthFix" />

		<!-- 第三张图片 -->
		<image :src="imageUrls[2]" class="image" mode="widthFix" />

		<!-- 第四张图片 -->
		<image :src="imageUrls[3]" class="image" mode="widthFix" />
	  
		<!-- 第五张图片 -->
		<image :src="imageUrls[4]" class="image" mode="widthFix" />

		<!-- 第六张图片 -->
		<image :src="imageUrls[5]" class="image" mode="widthFix" />
	  
		<!-- 第七张图片 -->
		<image show-menu-by-longpress="true" :src="imageUrls[6]" class="image" mode="widthFix" />
	  
    </scroll-view>
	
	<!-- 固定在底部的按钮 -->
	<view class="bottom-button" @click="jump">
	  <button class="btn">我要开店</button>
	</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrls: [
					'https://img.quexiaqp.com/uploads/20250624/52b0ed2cc8d12c6405a7254923619dea.jpg',
					'https://img.quexiaqp.com/uploads/20250623/83f2dba95cb5bcf1735f28b02ecb7a12.jpg',
					'https://img.quexiaqp.com/uploads/20250623/d5d64895f4125198db0fb1a1a4a43a06.jpg',
					'https://img.quexiaqp.com/uploads/20251014/c6d0f081fda020a93696613cd0bd14ab.jpg',
					'https://img.quexiaqp.com/uploads/20250623/9d05b53dd68af2d042db285f97363207.jpg',
					'https://img.quexiaqp.com/uploads/20250623/e2e7fd8ed8dc9c265f95879d77edc908.jpg',
					'https://img.quexiaqp.com/uploads/20250623/f343381bc8aa73ae6880f0cb5acdccdd.jpg',
				// 其他图片地址
				],
				videoSrc: 'https://weixin.qq.com/sph/Arn4CrBft',
				videoWidth: 0,
				videoHeight: 0,
			};
		},
	  mounted() {
			// 初始化视频播放
			this.videoContext = uni.createVideoContext('myVideo');
			this.videoContext.play();
			// 获取屏幕宽度
		    const systemInfo = uni.getSystemInfoSync();
		    const screenWidth = systemInfo.screenWidth;
		    const screenHeight = systemInfo.screenHeight;
		
		    // 设置视频宽度为屏幕宽度的 70%
		    this.videoWidth = screenWidth * 0.7;
		    // 根据屏幕长宽比设置视频高度（例如，假设视频比例为 16:9）
		    this.videoHeight = (this.videoWidth * 9) / 16;
		
	  },
	  methods: {
	    scroll(e) {
	      // 滚动时的逻辑（可选）
	      console.log('滚动位置:', e.detail.scrollTop);
	    },
		jump() {
		  uni.navigateTo({
			url: '/other/join/join', // 替换为实际跳转页面路径
		  });
		},
	  },
	};
</script>
<style>
.page-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.image-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.image {
  width: 100%;
  height: 100vh;
  display: block;
  margin: 0 auto;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

.video-container {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 86%;
  height: 33%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  border: 2px solid white;
  
}

.video {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
}
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7%;
  background-color: #ffffff;
  padding: 5px 40px;
  box-sizing: border-box;
  z-index: 999;
}

.btn {
  width: 100%;
  height: 100%;
  background-color: #FAD00D;
  color: white;
  border: none;
  border-radius: 0;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
</style>